<template>
	<view class="salary-details-container">
		<view style="padding: 20rpx;background-color: #fff;">
			<head style="font-size: 40rpx;">{{detailsInfo.salaryMonth}}</head>
			<u--form labelWidth='80' labelPosition="left" :model="detailsInfo" ref="uForm">
				<u-form-item label="姓名" prop="detailsInfo.talentName" borderBottom ref="item1">
					{{detailsInfo.talentName}}
				</u-form-item>
				<u-form-item label="发放月份" prop="detailsInfo.salaryMonth" borderBottom ref="item1">
					{{detailsInfo.salaryMonth}}
				</u-form-item>
				<u-form-item label="总工时" prop="detailsInfo.totalWorkHours" borderBottom ref="item1">
					{{detailsInfo.totalWorkHours}}
				</u-form-item>
				<u-form-item label="短缺工时" prop="detailsInfo.overtimeHours" borderBottom ref="item1">
					{{detailsInfo.overtimeHours}}
				</u-form-item>
				<u-form-item label="夜班" prop="detailsInfo.nightShifts" borderBottom ref="item1">
					{{detailsInfo.nightShifts}}
				</u-form-item>
				<u-form-item label="缺卡" prop="detailsInfo.absenceDays" borderBottom ref="item1">
					{{detailsInfo.absenceDays}}
				</u-form-item>
				<u-form-item label="日结" prop="detailsInfo.dailySettlement" borderBottom ref="item1">
					{{detailsInfo.dailySettlement}}
				</u-form-item>
				<u-form-item label="冻结时长" prop="detailsInfo.freezingTime" borderBottom ref="item1">
					{{detailsInfo.freezingTime}}
				</u-form-item>
				<u-form-item label="银行卡户主" prop="yinhangkahuzhu" borderBottom ref="item1">
					{{yinhangkahuzhu}}
				</u-form-item>
				<u-form-item label="银行卡号" prop="yinhangkahao" borderBottom ref="item1">
					{{yinhangkahao}}
				</u-form-item>
				<u-form-item label="状态" prop="userInfo.sex" borderBottom ref="item1">
					{{detailsInfo.status==0?'待确认':'确认'}}
				</u-form-item>
			</u--form>
		</view>
		<!-- <view class="form-item">
	      <label>姓名</label>
	      <view class="form-value">{{detailsInfo.talentName}}</view>
	    </view>
	    <view class="form-item">
	      <label>发放月份</label>
	      <view class="form-value">{{detailsInfo.salaryMonth}}</view>
	    </view>
	    <view class="form-item">
	      <label>状态</label>
	      <view class="form-value">{{detailsInfo.status==0?'待确认':'确认'}}</view>
	    </view> -->

		<!-- 薪资明细表格部分 -->
		<view class="salary-table">
			<view class="table-row header-row">
				<view class="col">增项</view>
				<view class="col">金额</view>
				<view class="col">减项</view>
				<view class="col">金额</view>
			</view>
			<view class="table-row">
				<view class="col">基本薪资</view>
				<view class="col">{{detailsInfo.basicSalary}}</view>
				<view class="col">个税</view>
				<view class="col">{{detailsInfo.personalTax}}</view>
			</view>
			<view class="table-row">
				<view class="col">满勤奖</view>
				<view class="col">{{detailsInfo.fullAttendanceBonus}}</view>
				<view class="col">社保</view>
				<view class="col">{{detailsInfo.insurance}}</view>
			</view>
			<view class="table-row">
				<view class="col">奖励</view>
				<view class="col">{{detailsInfo.bonus}}</view>
				<view class="col">预支</view>
				<view class="col">{{detailsInfo.advancePayment}}</view>
			</view>
			<view class="table-row">
				<view class="col">津贴</view>
				<view class="col">{{detailsInfo.allowance}}</view>
				<view class="col">工服</view>
				<view class="col">{{detailsInfo.uniformCost}}</view>
			</view>
			<view class="table-row">
				<view class="col">饭贴</view>
				<view class="col">{{detailsInfo.mealSubsidy}}</view>
				<view class="col">水电费</view>
				<view class="col">{{detailsInfo.waterElectricityFee}}</view>
			</view>
			<view class="table-row">
				<view class="col">夜班补贴</view>
				<view class="col">{{detailsInfo.nightPerk}}</view>
				<view class="col">代理费</view>
				<view class="col">{{detailsInfo.agencyFee}}</view>
			</view>
			<view class="table-row">
				<view class="col">高温补贴</view>
				<view class="col">{{detailsInfo.highTemperatureSubsidy}}</view>
				<view class="col">质量扣款</view>
				<view class="col">{{detailsInfo.qualityDeduction}}</view>
			</view>
			<view class="table-row">
				<view class="col">其他增项</view>
				<view class="col">{{detailsInfo.performanceIncentive}}</view>
				<view class="col">其他扣款</view>
				<view class="col">{{detailsInfo.otherDeductions}}</view>
			</view>
			<view class="table-row total-row">
				<view class="col">应发薪资</view>
				<view class="col total-amount">{{detailsInfo.payableSalary}}</view>
				<view class="col"></view>
				<view class="col"></view>
			</view>
			<view class="table-row total-row">
				<view class="col">实发薪资</view>
				<view class="col total-amount">{{detailsInfo.actualSalary}}</view>
				<view class="col"></view>
				<view class="col"></view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button v-if="detailsInfo.status == 0" class="confirm-btn" @click="confirmSalary">确认</button>
			<button class="return-btn" @click="goBack">返回</button>
		</view>
	</view>
</template>

<script>
	import {salaryPage,bankCardInfo,salaryConfirm} from '@/api/xinziqingkuang/xinziqingkuang.js'
	export default {
		data() {
			return {
				name: '张安',
				yearMonth: '2025 - 02',
				status: '未确认',
				detailsInfo: {},
				yinhangkahuzhu:'',
				yinhangkahao:'',
				salaryItems: [{
						plusItem: '基本工资',
						plusAmount: 3000,
						minusItem: '个税',
						minusAmount: 50
					},
					{
						plusItem: '绩效工资',
						plusAmount: 2000,
						minusItem: '社保',
						minusAmount: 500
					},
					{
						plusItem: '奖金',
						plusAmount: 1000,
						minusItem: '公积金',
						minusAmount: 500
					},
					{
						plusItem: '其他增项',
						plusAmount: 500,
						minusItem: '其他扣减',
						minusAmount: 0
					}
				],
				totalSalary: 5450
			};
		},
		onLoad(options) {
			console.log(options)
			this.detailsInfo = JSON.parse(decodeURIComponent(options.detailsInfo))
			console.log(this.detailsInfo, "detailsInfo")
			this.bankCardInfo()
		},
		methods: {
			async salaryConfirm(data){
				let res = await salaryConfirm(data)
				if(res.code == 200){
					uni.showToast({
						title:'确认成功',
						icon:'success',
						duration:2000
					})
					this.salaryPage(this.detailsInfo.id)
				}else{
					uni.showToast({
						title:'确认失败',
						icon:'error',
						duration:2000
					})
				}
			},
			async bankCardInfo(){
				let res = await bankCardInfo();
				if(res.code == 200){
					this.yinhangkahuzhu = res.data.bankAccountName;
					this.yinhangkahao = res.data.bankCardNo;
				}
			},
			async salaryPage(){
					let res = await salaryPage();  
					console.log(res,"薪资列表")
					if(res.code == 200){
						this.detailsInfo = res.rows[1]
					}
			},
			confirmSalary() {
				// 这里编写确认薪资的逻辑，比如调用后端接口提交确认操作
				console.log('执行确认薪资操作');
				this.bankCardInfo(this.detailsInfo.id)
			},
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped>
	.salary-detail-wrapper {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.label {
		width: 80rpx;
		font-size: 28rpx;
	}

	.info-value {
		flex: 1;
		font-size: 28rpx;
		padding: 10rpx;
		background-color: white;
		border-radius: 5rpx;
	}

	.salary-table {
		background-color: white;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.table-row {
		display: flex;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.header-row {
		font-weight: bold;
	}

	.col {
		flex: 1;
		text-align: center;
		padding: 10rpx;
		font-size: 28rpx;
	}

	.total-row {
		font-weight: bold;
	}

	.total-amount {
		color: #00b300;
	}

	.button-group {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.confirm-btn {
		background-color: #00b300;
		color: white;
		width: 80%;
		padding: 15rpx 60rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	.return-btn {
		background-color: #d9d9d9;
		color: #666;
		width: 80%;
		margin-top: 20rpx;
		padding: 15rpx 60rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
	}
</style>